$(function(){
    //  一. 实现剪裁的效果
    // 1.1 获取剪裁区的dom元素
    var $image=$('#image')
    //  1.2 配置选项
    const options={
        // 纵横比
        aspectRatio:1,
        preview:'.img-preview'
    }
    //  1.3 创建裁剪区域
    $image.cropper(options)
    //  二. 点击‘上传’能够选择图片
    $('button:contains("上传")').click(function(){
        $('#file').trigger('click');
    })
    //  三. 切换图片之后，更换剪裁区的图片
    $('#file').change(function(){
        //  3.1 找到文件对象
        var fileObj=this.files[0];
        //  3.2 调用js内置对象URL.createObjectURL();
        var url=URL.createObjectURL(fileObj);
        $image.cropper('destroy').attr('src',url).cropper(options);
    })
    //  四. 点击‘确定’, 剪裁图片, 同时更换头像
    $('button:contains("确定")').click(function(){
        var dataURL = $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
          width: 100,
          height: 100
        })
        .toDataURL('image/png');  
        $.ajax({
            type:'post',
            url:'/my/update/avatar',
            data:{avatar:dataURL},
            success:function(res){
                layer.msg(res.message);
                if(res.status===0){
                    window.parent.getUserInfo();
                }
            },
        })
    })
})